
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map</title>
</head>
<body>
    <ul name="我是ul" id="1" age="20">
        <li name="java">学习java</li>
        <li name="web">学习web</li>
        <li name="ui">学习ui</li>
    </ul>

    <!-- 
        Map:双列键值对的集合:并各种类型的值（包括对象）都可以当作键
        ES6 提供了 Map 数据结构。它类似于对象，也是双列键值对的集合，
        但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键
        注意事项：
            不能使用for in 循环 可以使用for of

        属性和方法：
            - size**  获取Map的长度 此处注意size是属性不是方法
            - **set(key,val)**  添加一条数据
            - **get(key)**  根据key获取val
            - **has(key)**  是否存在key
            - **delete(key)** 删除某条数据
            - **clear()** 清空所有数据

        快速遍历map数据的方法
            - map.keys() 返回Map对象的所有键
            - map.values() 返回Map对象的所有值
            - map.entries()返回Map对象的所有键值对
            - map.forEach() map是迭代对象，可以直接遍历

        应用场景：
            1.创建对象
            2.辅助我们友好的操作dom元素 隔离dom

     -->


     <script>

        let arr = [['id', 11], ['name', '李四'], [100, '我是数字key'], [true, '我是bool的key']]

        let m1 = new Map(arr)
        console.log(m1);
        console.log(m1.size);
        

        let m = new Map()
        console.log(m);
        m.set("id",1000)
        m.set(true,"我是bool类的key")
        m.set({},"我是对象类型的key")
        let ul = document.querySelector("ul")
        m.set(ul,"我是dom节点对象的key");

        console.log(m);
        

         // 2.属性和方法
         // get(key)  根据key获取val

        //  console.log(m.get(ul));

         
        // has(key) 是否存在key
        // console.log(m.has("id"));

         // delete(key) 删除某条数据
        //  console.log(m.delete("id"));
        //  console.log(m);
         
        // clear() 清空所有数据
        //  m.clear()
        //  console.log(m);
         
        // for (const key in m) {
        //     console.log(key);
            
        // }

        // for (const key of m) {
        //     console.log(key);
            
        // }
         

        // 3.使用map方法快速遍历对象数据
        // - map.keys() 返回Map对象的所有键
        console.log(m.keys())
        console.log([...m.keys()])

        // - map.values() 返回Map对象的所有值
        console.log([...m.values()])

        // - map.entries()返回Map对象的所有键值对
        console.log(m.entries())

        // - map.forEach() map是迭代对象，可以直接遍历
        m.forEach((item, index) => {
            console.log(index, item)
        })


        // 应用场景：
        //     1.创建对象
        //     2.辅助我们友好的操作dom元素 隔离dom


     </script>


</body>
</html>